<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/index">主页</router-link>
                <router-link to="/add">添加页</router-link>
                <router-link to="/sou/18">搜索18</router-link>
                <router-link to="/sou/28">搜索28</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>

    <script>
        const router = new VueRouter({
            routes: [
                {
                    path: '/index', component: {
                        template: `
                        <div>
                            我是主页
                            </div>
                    `
                    }
                },
                {
                    path: '/add', component: {
                        template: `
                        <div>
                            我是添加页
                            </div>
                    `
                    }
                },
                {
                    path: '/sou/:id', component: {
                        template: `
                        <div>
                            我是搜索页
                            {{$route.params.id}}
                            </div>
                    `
                    }
                }
            ]
        })
        new Vue({
            el: '#app',
            router: router
        })
    </script>

</body>

</html>